<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>MXQY</title>
    <link rel="stylesheet" href="http://itphy.com/frozenui/css/frozen.css">
    <link rel="stylesheet" href="http://itphy.com/frozenui/css/basic.css">
    <style>
        .ui-footer {
            bottom: 0;
            height: 75px;
        }

        .ui-footer-btn {
            color: #484747;
        }

        .active {
            color: #00a5e0 !important;
            font-weight: bold;
        }

        .ui-header {
            height: 70px;
        }

        .ui-header ~ .ui-container {
            border-top: 70px solid transparent;
        }

        .ui-avatar-tiled {
            width: 70px;
            height: 70px;
        }

        ul .ui-avatar-tiled {
            width: 50px;
            height: 50px;
        }

        .ui-tiled-z {
            overflow: hidden;
            display: inline-block;
            width: 70px;
            height: 70px;
            color: #8a8a8a;
        }

        .ui-border-r {
             border-right: none;
        }
        .ui-border-t{
            border: 1px none red;
        }
    </style>
</head>

<body ontouchstart>
<header class="ui-header ui-header-positive ">
    <div>
        <span class="ui-avatar-tiled">
               <span style="background-image:url(https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3764663595,3553455155&fm=26&gp=0.jpg)"></span>
        </span>
        <span class="ui-tiled-z">
             <div style="height: 30px">林中鸟</div>
             <div style="font-size: 10px;color: green">在线</div>
        </span>
        <span style="display: block;position: absolute;right: 10px;top: 40%;margin-top: -15px;">
            <i class="ui-icon-add"></i>
        </span>
    </div>

</header>
<footer class="ui-footer ui-footer-btn">
    <ul class="ui-tiled">
        <li><i class="ui-icon-news"></i>
            <div>消息</div>
        </li>
        <li><i class="ui-icon-personal"></i>
            <div>联系人</div>
        </li>
        <li><i class="ui-icon-voice"></i>
            <div>动态</div>
        </li>
    </ul>
</footer>
<section class="ui-container" id="list">
    <section style="display: none">
        <div class="ui-searchbar-wrap ui-border-b">
            <div class="ui-searchbar ui-border-radius">
                <i class="ui-icon-search"></i>
                <div class="ui-searchbar-text">搜索号码（2-10位）</div>
                <div class="ui-searchbar-input"><input value="" type="tel" placeholder="搜索号码（2-10位）"
                                                       autocapitalize="off"></div>
                <i class="ui-icon-close"></i>
            </div>
            <button class="ui-searchbar-cancel">取消</button>
        </div>
        <div class="demo-block">
            <ul class="ui-list ui-border-tb">
                <li>
                    <div class="ui-avatar">
                        <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                    </div>
                    <div class="ui-list-info ">
                        <h4 class="ui-nowrap">马化腾</h4>
                            <p>等等啊!</p>
                    </div>
                    <div class="ui-tiled-z ui-newstips" style="background-color: white">
                        <span class="ui-badge-num">99+</span>
                        <span class="ui-badge-num" style="background-color: white;color: #8a8a8a">17:50</span>
                    </div>
                </li>
                <li>
                    <div class="ui-avatar">
                        <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                    </div>
                    <div class="ui-list-info ">
                        <h4 class="ui-nowrap">马化腾</h4>
                            <p>等等啊!</p>
                    </div>
                    <div class="ui-tiled-z ui-newstips" style="background-color: white">
                        <span class="ui-badge-num">99+</span>
                        <span class="ui-badge-num" style="background-color: white;color: #8a8a8a">17:50</span>
                    </div>
                </li>
                <li>
                    <div class="ui-avatar">
                        <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                    </div>
                    <div class="ui-list-info ">
                        <h4 class="ui-nowrap">马化腾</h4>
                            <p>等等啊!</p>
                    </div>
                    <div class="ui-tiled-z ui-newstips" style="background-color: white">
                        <span class="ui-badge-num">99+</span>
                        <span class="ui-badge-num" style="background-color: white;color: #8a8a8a">17:50</span>
                    </div>
                </li>
            </ul>
        </div>
    </section>
    <section style="display: none">
        <div class="ui-searchbar-wrap ui-border-b">
            <div class="ui-searchbar ui-border-radius">
                <i class="ui-icon-search"></i>
                <div class="ui-searchbar-text">搜索号码（2-10位）</div>
                <div class="ui-searchbar-input"><input value="" type="tel" placeholder="搜索号码（2-10位）"
                                                       autocapitalize="off"></div>
                <i class="ui-icon-close"></i>
            </div>
            <button class="ui-searchbar-cancel">取消</button>
        </div>
        <div class="demo-block">
            <div class="ui-tab">
                <ul class="ui-tab-nav ui-border-b">
                    <li class="current"><span>栏目1</span></li>
                    <li><span>栏目2</span></li>
                    <li><span>栏目3</span></li>
                    <li><span>栏目4</span></li>
                    <li><span>栏目5</span></li>
                </ul>
                <ul class="ui-tab-content" style="width:500%">
                    <li>内容1</li>
                    <li>内容2</li>
                    <li>内容3</li>
                    <li>内容4</li>
                    <li>内容5</li>
                </ul>
            </div>
        </div>
    </section>
    <section style="display: none">
        <div class="demo-item">
            <div class="demo-block">
                <ul class="ui-list ui-list-link ui-list-single ui-border-tb">
                    <li>
                        <div class="ui-avatar-s">
                            <span style="background-image:url(https://www.phaser-china.com/images/banner/banner1.jpg)"></span>
                        </div>
                        <div class="ui-list-info ui-border-t">
                            <h4 class="ui-nowrap">好友动态</h4>
                        </div>
                    </li>
                    <li>
                        <div class="ui-avatar-s">
                            <span style="background-image:url(https://www.phaser-china.com/images/banner/banner1.jpg)"></span>
                        </div>
                        <div class="ui-list-info ui-border-t">
                            <h4 class="ui-nowrap">全民k歌</h4>
                        </div>
                    </li>
                    <li>
                        <div class="ui-avatar-s">
                            <span style="background-image:url(https://www.phaser-china.com/images/banner/banner1.jpg)"></span>
                        </div>
                        <div class="ui-list-info ui-border-t">
                            <h4 class="ui-nowrap">坦白说</h4>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</section>
<script src="http://itphy.com/frozenui/lib/zepto.min.js"></script>
<script src="http://itphy.com/frozenui/js/frozen.js"></script>
<script src="http://itphy.com/jquery/jquery.js"></script>
<script src="/js/dialog.js"></script>
<script type="text/javascript">
    $('.ui-searchbar').tap(function () {
        $('.ui-searchbar-wrap').addClass('focus');
        $('.ui-searchbar-input input').focus();
    });
    $('.ui-searchbar-cancel').tap(function () {
        $('.ui-searchbar-wrap').removeClass('focus');
    });
    $(".ui-tab-nav li").click(function () {
        $(this).addClass("current").siblings().removeClass("current")
        $(".ui-tab-content li").eq($(this).index()).show().siblings().hide()
    }).first().trigger("click")
    $(".ui-tiled li").click(function () {
        $(this).addClass("active").siblings().removeClass("active")
        $(this).find("i").addClass("active")
        $(this).siblings().find('i').removeClass("active")
        $("#list").find("section").eq($(this).index()).show().siblings().hide()
    }).first().trigger("click");
</script>
<script>
    $(function (){
        $(".ui-list li").click(function (){
            dialog.show({
                title:"hello",
                content:"world",
                btn:[
                    {id:"aa",text:"aa"},
                    {id:"bb",text:"bb"},
                    {id:"cc",text:"cc"},
                ],
                aa: function (){
                    alert(1)
                },
                bb: function (){
                    alert(2)
                },
                cc: function (){
                    alert(3)
                }
            });
        })
    })
</script>
</body>
</html>
